<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>FMC管理</el-breadcrumb-item>
      <el-breadcrumb-item>FMC猪场</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图 -->
    <el-card class="box-card">
      <!-- 搜索与添加区域 -->
      <el-row :gutter="20">
        <el-col :span="4">
          <el-date-picker v-model="datevalue"
                          align="left"
                          type="datetime"
                          placeholder="选择日期"
                          :picker-options="pickerOptions">
          </el-date-picker>
        </el-col>
        <el-col :span="8"
                :offset="1">
          <div>
            <el-input v-model="queryInfo.query"
                      class="input-with-select"
                      :clearable="true"
                      placeholder="请输入内容"
                      @keyup.enter.native="getFarmList(queryInfo.query)">
              <el-button slot="append"
                         icon="el-icon-search"
                         @click="getFarmList(queryInfo.query)"></el-button>
            </el-input>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <!--  用户列表区域-->
    <el-descriptions class="margin-top"
                     title="批次信息"
                     :column="3"
                     size="medium"
                     border>
      <template slot="extra">
        <el-button type="primary"
                   size="small"
                   @click="getFarmList(queryInfo.query)">刷新</el-button>
      </template>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-user"></i>
          猪场名
        </template>
        {{tableData.farmName}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          批次号
        </template>
        {{tableData.batchCode}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          批次状态
        </template>
        {{tableData.status}}/{{tableData.repurchaseStatus}}/{{tableData.settleStatus}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          死淘数量
        </template>
        {{tableData.weedoutNumber}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          销售数量
        </template>
        {{tableData.salesNumber}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          回收数量
        </template>
        {{tableData.repurchaseCounts}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          进苗数量
        </template>
        {{tableData.pigletInNumber}}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-tickets"></i>
          存栏数量
        </template>
        {{tableData.pigletRemainNumber}}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
export default {
  data () {
    return {
      queryInfo: {
        query: '797498498976780288',
        pagenum: 1,
        pagesize: 5
      },
      tableData: [{}],
      roleData: [{}],
      expandrows: [],
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > Date.now()
        },
        shortcuts: [{
          text: '今天',
          onClick (picker) {
            picker.$emit('pick', new Date())
          }
        }, {
          text: '昨天',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24)
            picker.$emit('pick', date)
          }
        }, {
          text: '一周前',
          onClick (picker) {
            const date = new Date()
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', date)
          }
        }]
      },
      datevalue: ''
    }
  },
  created () {
    this.getFarmList('797498498976780288')
  },
  methods: {
    async getFarmList (id) {
      const { data: res } = await this.$http.get(`farmbatch/${id}`)
      if (res.code !== 200) {
        //
        this.$message.error('查询批次信息失败!')
      }
      console.log(res)
      this.tableData = res.data
    }
  }
}
</script>

<style lang="less" scoped>
</style>>
